<template>
	<view class="cont">
		<view style="height:90rpx;width: 750rpx;background: #FFFFFF;display: flex;padding: 15rpx 40rpx;box-sizing: border-box;position: fixed;top: 0;z-index: 121212;">
			<scroll-view scroll-x="true" class="kite-classify-scroll" :scroll-left="juli">
				<view class="kite-classify-cell" v-for="(itme,index) in arr_" :key="index" style="font-size: 35rpx;">
					<view style="display: flex;align-items: center;flex-direction: column;" @tap="huanke(index,itme)">
						<view :style="[{color:list_num == index? '#FF7300':'#414141'}]">{{itme}}</view>
						<view style="width: 48rpx;height: 7rpx;background: #FF7300;margin-top: 20rpx;" v-if="list_num == index"></view>
					</view>
				</view>
			</scroll-view>
		</view>
		<scroll-view style="height: 90vh;width: 750rpx;margin-top: 95rpx;" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
			:refresher-threshold="200" refresher-background="#D6D6D6" @refresherrefresh="onRefresh"  :scroll-top="scrollTop"  @scrolltolower="scrolltolower">
			<view style="width: 750rpx;">
				<view v-for="(itme,index) in xuanran_data" :key="index" style="width: 750rpx;box-sizing: border-box;padding: 21.14rpx 52.548rpx 10rpx 55.57rpx;display:flex;margin-bottom: 5rpx;background: #FFFFFF;" v-if="xuanran_data.length != 0" @tap="gojigou(itme)">
					<view style="position: relative;">
						<image :src="itme.mechanism_logo" style="width: 195.02rpx;height: 195.02rpx;border-radius: 9.03rpx;border: #D6D6D6 0.09rpx solid;"></image>
						<view style="position: absolute;top: 0;left: 0;z-index: 12121;width: 70.7rpx;height: 35rpx;text-align: center;line-height: 35rpx;color: #FFFFFF;font-size: 20rpx;border-radius: 9rpx 0 9rpx 0 ;background: #FF3D3D;">{{itme.categories}}</view>
					</view>
					<view style="margin-left: 24.77rpx;width: 464rpx;">
						<view style="font-size: 31rpx;color: #414141;font-weight: bold;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{itme.mechanism_name}}</view>
						<view style="margin: 14rpx 0 ;display: flex;justify-content: space-between;">
							<view style="display: flex;align-items: center;">
								<view>
									<!-- <unirouter :value.sync="itme.avg_rating" disabled="true" activeColor="#FF942B" disabledColor="#FF942B" size="18"></unirouter> -->
								</view>
								<view v-if="itme.avg_rating == 5" style="width: 79.728rpx;height: 30.8rpx;border: 1rpx solid #FF5555;border-radius: 15.4rpx;font-size: 18rpx;text-align: center;line-height: 30.8rpx;color: #FF5555;margin-left: 30rpx;">人气王</view>
							</view>
							<view style="font-size: 25rpx;color: #474747;">{{itme.distances}}km</view>
						</view>
						<view style="font-size: 25rpx;color: #BEBEBE;">
							<text>{{itme.mechanism_addr}}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view v-if="panduan" style="font-size: 40rpx;color:#D6D6D6;font-weight: bold;position: absolute;top: 50%;left: 50%;text-align: center;">
			<text style="position: relative;left: -85rpx;">暂无数据</text>
		</view>
	</view>
</template>
<script>
	export default {
		data(){
			return{
				arr_:["乐高","编程","棋类"],
				list_num:0,
				content:"",
				leixing:"乐高",
				jingweidu:{},
				num_:1,
				xuanran_data:[],
				num:1,
				ting:1,
				juli:10,
				triggered: false,
				list: 1,
				panduan: false,
				scrollTop: 0,
				list_: 1
			}
		},
		onReachBottom(){
			let me = this
			if(me.ting == 1){
				me.qingqiu()
			}
		},
		methods:{
			
			gojigou(itme){
				uni.navigateTo({
					url:'/pages/Meet/jigouxiangqing/jigouxiangqing?id=' +  itme.id
				})
			},
			
			huanke(index,itme){
				let me = this
				me.list_num = index
				me.num_ = 1
				me.ting = 1
				me.list_ = 1
				me.panduan = false
				if(itme !=me.leixing){
					me.xuanran_data = []
					me.leixing = itme
					me.qingqiu()
					me.scrollTop = 0
				}
			},
			
			fanhui(){
				uni.navigateBack({
				    delta: 1
				})
			},
			
			juli_xin(itme){
				console.log(itme)
			},
			
		async	qingqiu(){
				let me = this
				if(me.list_ != 2){
					me.triggered = true
				}
				const res = await me.$myRequest({
					url:"/mastermechanism/queryMechanismByType",
					data:{
						currentPage: me.num_,
						pageSize: 10,
						// categories: "益智",
						categories_child: me.leixing,
						longitude: me.jingweidu.longitude,
						latitude: me.jingweidu.latitude,
						type:"teach_paypal"
					}
				})
				if(res.data.length == 0 || res.data.length < 10){
					me.ting = 2
				}
				res.data.forEach((itme) => {
					itme.distances = me.getDistance(me.jingweidu.latitude, me.jingweidu.longitude, itme.latitude, itme.longitude).toFixed(2)
				})
				if(me.xuanran_data.length == 0){
					me.xuanran_data = res.data
				}else{
					me.xuanran_data = me.xuanran_data.concat(res.data)
				}
				if(me.xuanran_data.length == 0){
					me.panduan = true
				}
				me.triggered = false
			},
			
			onRefresh(){
				this.panduan = false
				this.list_ = 2
				this.num_ = 1
				this.xuanran_data = []
				this.qingqiu()
			},
			
			scrolltolower(){
				if(this.ting == 1){
					this.num_++
					this.qingqiu()
				}
			},
			
			rad(d) {
				return d * Math.PI / 180.0; 
			},
			
			getDistance(lat1, lng1, lat2, lng2) {
				let me = this
				var radLat1 = me.rad(lat1);
				var radLat2 = me.rad(lat2);
				var a = radLat1 - radLat2;
				var b = me.rad(lng1) - me.rad(lng2);
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000; //输出为公里
				var distance = s;
				var distance_str = "";
				if (parseInt(distance) >= 1) {
					distance_str = distance.toFixed(1) + "km";
				} else {
					distance_str = distance * 1000 + "m";
				}
				return s;
			}
		},
		onReachBottom(){
			let me = this
			if(me.ting == 1){
				me.num_++
				me.qingqiu()
			}
		},
		onLoad() {
			
			let me = this
			try{
				me.jingweidu = uni.getStorageSync('storage_key')
				me.qingqiu()
			}catch(e){console.log(e)}
			
		},
		onShow() {
			
		}
	}
</script>
<style lang="scss" scoped>
	.list{
		border-right: 2px solid #F2F2F2;
	}
	.clo{
		color: #C4C4C4;
		border: 0.9rpx solid #C4C4C4;
	}
	.kaike{
		color: #FF7300;
		font-size: 21.744rpx;
		font-weight: bold;
	}
	.ranse{
		color: #FF7300;
	}
	.cont{
		.fanlei{
			width: 750rpx;
			height: 84.56rpx;
			background: #FFFFFF;
			display: flex;
			box-sizing: border-box;
			padding:10rpx;
			margin-top: 308rpx;
			z-index: 121212121;
			.xuanze{
				width: 246.43rpx;
				font-size: 23.14rpx;
				text-align: center;
				height: 44.08rpx;
				line-height: 44.08rpx;
				color: #414141;
			}
		}
	}
	.kite-classify-scroll{
		display: flex;
		align-items: center;
	    width: 100%;
		height:120rpx;;
		overflow: hidden;
	 	white-space: nowrap;
		margin: 0;
		padding: 0;
	}
	
	.kite-classify-cell{
		display: inline-block;
		width: 95rpx;
		height:120rpx;
		font-size: 26rpx;
		color: #FF7300;
		text-align: center;
		padding: 0;
		margin-right: 15rpx;
		
	}
	.kite-classify-scroll ::-webkit-scrollbar {
		 /* 隐藏滚动条，但依旧具备可以滚动的功能 */
		 display: none;
		 width: 0;
		 height: 0;
		 color: transparent;
		 background: transparent;
		}
		/deep/::-webkit-scrollbar {
		 display: none;
		 width: 0;
		 height: 0;
		 color: transparent;
		 background: transparent;
		}
</style>